<template>
  <div>
    <el-card class="box-card tac" style="font-size: 18px;
    color: #909399;font-weight: 700; ">
      <span>{{isadd?'添加影院信息':'修改影院信息'}}</span>
    </el-card>
    <el-card class="box-card tac" style="margin-top:5px; background-color:#fff">
      <el-form ref="form" :model="form">
        <el-form-item style="margin-top:25px;">
          <Address :cityId="form.cityId" :areaId="form.areaId" @getaddress="getaddress"></Address>
        </el-form-item>

        <el-form-item style="margin-top:25px;">
          <span style="font-size:14px;color: #303133; line-height: 40px;margin-right:10px;">城市ID</span>
          <el-input disabled v-model="form.cityId" placeholder="请输入城市ID" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item style="margin-top:25px;">
          <span style="font-size:14px;color: #303133; line-height: 40px;margin-right:10px;">区域ID</span>
          <el-input disabled v-model="form.areaId" placeholder="请输入区域ID" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item style="margin-top:25px;">
          <span style="font-size:14px;color: #303133; line-height: 40px;margin-right:10px;">影院名称</span>
          <el-input v-model="form.name" placeholder="请输入影院名称" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item style="margin-top:25px;">
          <span style="font-size:14px;color: #303133; line-height: 40px;margin-right:10px;">影院地址</span>
          <el-input v-model="form.address" placeholder="请输入影院地址" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item style="margin-top:25px;">
          <span style="font-size:14px;color: #303133; line-height: 40px;margin-right:10px;">最低价格</span>
          <el-input v-model="form.lowPrice" placeholder="请输入最低价格" style="width:300px"></el-input>
        </el-form-item>

        <el-form-item class="tac" style="margin-top:40px;">
          <el-button
            v-loading="loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            type="primary"
            @click="onSubmit"
            style="margin-left:40px;"
          >{{isadd?'确认添加':'确认修改'}}</el-button>
          <el-button type="info" @click="exit" style="margin-left:30px">{{isadd?'清空数据':'取消修改'}}</el-button>
          <el-button type="success" style="margin-left:40px;" @click="watch1">查看列表</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import axios from "axios";
import Address from "./address";
export default {
  data() {
    return {
      form: {
        cityId: "",
        cityName: "",
        areaId: "",
        areaName: "",
        name: "",
        address: "",
        lowPrice: ""
      },
      list: [],
      index: 0,
      loading: false,
      isadd: true
    };
  },
  methods: {
    onSubmit() {
      if (this.isadd) {
        this.loading = true;
        let flag =
          this.form.cityId &&
          this.form.name &&
          this.form.region &&
          this.form.lowPrice;

        if (flag == false) {
          this.$message({
            showClose: true,
            message: "请输入所有必填项",
            type: "warning"
          });
          setTimeout(() => {
            this.loading = false;
          }, 800);
        } else {
          let areaurl = "/area/allArea";
          this.$axios.get(areaurl).then(res => {
            for (let i = 0; i < res.areas.length; i++) {
              if (res.areas[i].cityId == this.form.cityId) {
                this.form.areaName = res.areas[i].name;
                this.form.cityName = res.areas[i].cityName;
              }
            }
            let url = "/cinema/add";
            let data = {
              cityId: this.form.cityId,
              cityName: this.form.cityName,
              areaId: this.form.areaId,
              areaName: this.form.areaName,
              name: this.form.name,
              address: this.form.address,
              lowPrice: this.form.lowPrice
            };
            this.$axios
              .post(url, data)
              .then(res => {
                if (res.code == 666) {
                  this.$message.success("添加影院信息成功");
                } else {
                  this.$message.error("影院信息已存在");
                }
              })
              .catch(err => {
                this.$message.error("添加失误");
              });
            setTimeout(() => {
              this.loading = false;
            }, 800);
          });
        }
      } else {
        this.loading = true;
        let url = "/cinema/edit";
        this.$axios
          .post(url, this.form)
          .then(res => {
            this.loading = false;
            let msgObj = this.$message.success("修改影院信息成功");
            setTimeout(() => {
              msgObj.close();
              this.$router.push("/cinema/list");
            }, 500);
          })
          .catch(err => {
            this.$message.error("影院名称已存在");
            this.loading = false;
          });
      }
    },
    exit() {
      if (this.isadd) {
        this.form = {
          cityId: "",
          cityName: "",
          areaId: "",
          areaName: "",
          name: "",
          address: "",
          lowPrice: ""
        };
      } else {
        this.$router.push("/cinema/list");
      }
    },
    watch1() {
      this.$router.push("/cinema/list");
    },
    getaddress(data) {
      this.form.cityId = data[0];
      this.form.areaId = data[1];
    }
  },
  components: {
    Address
  },
  created() {
    if (this.$route.fullPath !== "/cinema/add") {
      this.isadd = false;
      this.form = this.$route.query.data;
    }
  }
};
</script>